<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title></title>
    <script src="lib/loader.js"></script>
    <style>
      div, g-A {
        display: block;
        border: 1px dotted red;
        margin: 8px;
        padding: 8px;
      }
    </style>
    <script>
      change = function() {
        A = $("g-A");
        A.webkitCreateShadowRoot().appendChild($("template#Ab").content);
        A.webkitCreateShadowRoot().appendChild($("template#A").content);
      };
    </script>
  </head>
  <body onload="change();">
      <g-A>
        <span id="a2">Where am I?</span>
        <span id="a1">I go first</span>
      </g-A>
      <template id="Ab"><span>A's base template, #a2: [<content select="#a2"></content>]</span></template>
      <template id="A">#a1:[<content select="#a1"></content>]<span> A's template, shadow: {<shadow></shadow>}</span></template>

      <hr/>

      Expected output (also, see console):

      <div><span>#a1:[I go first] A's template, shadow: {A's base template, #a2: [Where am I?]}</span></div>
  </body>
</html>
